<template>
  <view class="container">
    <cu-custom bgColor="bg-gradual-green" :isBack="false">
      <block v-slot:backText>返回</block>
      <block v-slot:content>注册</block>
    </cu-custom>
    <view class="flex justify-center bg-white margin-top-xl">
      <view class="header-title text-bold text-olive margin-top-xl padding-xl">
        M3 Center
      </view>
      <!--      <image src="@/static/img/apple.png"></image>-->
    </view>
    <view class="cu-form-group flex-direction">
      <view class="solid-top justify-center align-center">
        <view class="cu-form-group">
          <view class="title">昵称</view>
          <input type="text" class="cu-input" v-model="formData.nickname" placeholder="请输入昵称"/>
        </view>
        <view class="cu-form-group">
          <view class="title">用户名</view>
          <input type="text" class="cu-input" v-model="formData.username" placeholder="请输入用户名"/>
        </view>
        <view class="cu-form-group">
          <view class="title">密码</view>
          <input type="password" class="cu-input" v-model="formData.password" placeholder="请输入密码"/>
        </view>
        <view class="cu-form-group">
          <view class="title">确认密码</view>
          <input type="password" class="cu-input" v-model="formData.rePassword" placeholder="请再次输入密码"/>
        </view>

        <view class="cu-btn bg-green radius lg block round margin-top-xl" @tap="register">注册</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: null,
        password: null,
        nickname: null,
        rePassword: null,

      }
      // 可以在这里定义页面需要的数据
    };
  },
  methods: {
    register() {
      let formData = this.formData;
      if (formData.password !== formData.rePassword) {
        return uni.showToast({
          title: "密码输入不一致",
          icon: "none"
        })
      }
      $common.post("/m3system/app/register", formData).then(res => {
        if (res) {
          console.log(res)
        }
      })
    }
    // 定义注册逻辑
  }
};
</script>

<style>
page {
  background: #ffffff;
}

.header-title {
  font-size: 44px;
  color: #333;
  margin-bottom: 15px;
}

/* 在这里添加你的自定义样式，如果需要的话 */
.title {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}
</style>